import React, { useEffect, useState } from 'react'
import { Box, AutoRollComponent, NoData } from '$components';
import { Tooltip } from 'antd';
import moment from 'moment';
import './style.less';

function CitySafty(props) {
    const { trendData } = props;
    const getContent = () => {
        return <div className='rank_content_overflow'>
            {trendData?.map((s, index) => {
                return <div className='_rank_content' key={s.index}>
                    <div className={`_rank_item1`}>
                        <Tooltip placement="topLeft" title={s.name}>{s.name}</Tooltip>
                    </div>
                    <div className='_rank_item2'>{s.currentTime ? moment(s.currentTime).format('HH:mm:ss') : '--'}</div>
                    <div className='_rank_item3'>{s.waterLevel}{s.waterLevel && <div className={s.waterLevel - s.lastWaterLevel > 0 ? '_upicon' : '_downicon'} />}</div>
                    <div className='_rank_item4'>
                        <div className={s.futureState === '正常' ? 'normalbg' : 'warningbg'} >
                            {s.futureState === '正常' ? '正常' : s.futureState.length ? '告警' : '--'}
                        </div>
                    </div>
                </div>
            })}
        </div>

    }
    const renderDate = () => {
        let renderTime = ''
        const time = trendData?.find(t => t.currentTime)?.currentTime
        if (time) {
            renderTime = moment(time).format('YYYY-MM-DD')
        }
        return <div>{renderTime}</div>
    }

    return <Box title={"水位趋势预测图"} subtitleSelect={renderDate()} >
        {trendData?.length > 0 ?
            <div className='water_traffic_ranking'>
                <div className='_rank_title'>
                    <div className='_rank_item1'>点位名称</div>
                    <div className='_rank_item2'>时间</div>
                    <div className='_rank_item3'>水位</div>
                    <div className='_rank_item4'>未来1小时趋势</div>
                </div>
                {trendData?.length > 0 && <AutoRollComponent canScroll={true} content={getContent()} divHeight={340} divId={`fire-right-top`} />}
            </div> :
            <NoData height={320} />}

    </Box>
}

export default CitySafty;


